<html>
<head>
    <title>Using JavaScript Image Map</title>
    <script type="text/javascript">
        <!--
        function showTutorial(name) {
            document.myform.stage.value = name
        }
        //-->
    </script>
</head>
<body>
<p>area 可以是圆形（circ），多边形(poly)，矩形(rect)，不同形状要选取不同的坐标（coords）.<br>
    圆形：shape="circle"，coords="x,y,z"<br>
    x,y为圆心坐标（x,y），z为圆的半径<br>
    多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."<br>
    每一对x,y坐标都定义了多边形的一个顶点(0,0) 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。<br>
    矩形：shape="rectangle"，coords="x1,y1,x2,y2"<br>
    第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。<br>
    请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。（就是说，知道对角的两个点的坐标就行了。）</p>
<form name="myform">
    <input type="text" name="stage" size="20"/>
</form>
<!-- Create  Mappings -->
<img src="../CSSPractice/wolf.png" alt="HTML Map"
     border="0" usemap="#tutorials"/>
<map name="tutorials">
    <area shape="poly"
          coords="74,0,113,29,98,72,52,72,38,27"
          href="/perl/index.htm" alt="Perl Tutorial"
          target="_self"
          onMouseOver="showTutorial('perl')"
          onMouseOut="showTutorial('')"/>
    <area shape="rect"
          coords="22,83,126,125"
          href="/html/index.htm" alt="HTML Tutorial"
          target="_self"
          onMouseOver="showTutorial('html')"
          onMouseOut="showTutorial('')"/>
    <area shape="circle"
          coords="73,168,32"
          href="/php/index.htm" alt="PHP Tutorial"
          target="_self"
          onMouseOver="showTutorial('php')"
          onMouseOut="showTutorial('')"/>
</map>
</body>
</html>